<template>
	<view class="area_Content">
		<view class="area-title">
			<i class="iconfont iconguanbi" @tap="closeCurrent"></i>
			<text>选择所在位置</text>
		</view>
		<view class="area_search">
			<uni-search-bar radius="100" clearButton="always" @confirm="search" />
		</view>
		<scroll-view scroll-y="true" class="area_list">
			<view class="area_item" v-for="(item,index) in area_list" :key="index">
				<view class="area_title">
					<view class="area_name">{{item.name}}</view>
					<view class="area_gap">{{item.gap}}m</view>
				</view>
				<view class="area_info">
					<view class="area_address">{{item.address}}</view>
					<i class="iconfont iconduigou"></i>
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class='pop-bg' catchtouchmove="false" v-if="con1Switch" @tap.stop="closeAll">
			<view class="bg-con1" v-for="(item, index) in arrBgCon1" :key="index" @tap="con1ChangeOpt(item.subject_name,item.sid,index)">
				<view class="opi-styl" :class="[con1Current == index ? 'active-opi-styl' : '']">{{item.subject_name}}</view>
				<i class="iconfont gougou-styl" :class="[con1Current == index ? 'iconduigou' : '']"></i>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	export default{
		components: {
			uniSearchBar
		},
		data() {
			return {
				area_list: [
					{name:'圣琼美食城',address:'珠海市香洲区吉大路2号珠海国际会议中心裙楼',gap:34},
					{name:'圣琼美食城',address:'珠海市香洲区吉大路2号珠海国际会议中心裙楼',gap:34},
					{name:'圣琼美食城',address:'珠海市香洲区吉大路2号珠海国际会议中心裙楼',gap:34},
					{name:'圣琼美食城',address:'珠海市香洲区吉大路2号珠海国际会议中心裙楼',gap:34},
					{name:'圣琼美食城',address:'珠海市香洲区吉大路2号珠海国际会议中心裙楼',gap:34},
					{name:'圣琼美食城',address:'珠海市香洲区吉大路2号珠海国际会议中心裙楼',gap:34},
					{name:'圣琼美食城',address:'珠海市香洲区吉大路2号珠海国际会议中心裙楼',gap:34},
					{name:'圣琼美食城',address:'珠海市香洲区吉大路2号珠海国际会议中心裙楼',gap:34},
					{name:'圣琼美食城',address:'珠海市香洲区吉大路2号珠海国际会议中心裙楼',gap:34},
					{name:'圣琼美食城',address:'珠海市香洲区吉大路2号珠海国际会议中心裙楼',gap:34},
					{name:'圣琼美食城',address:'珠海市香洲区吉大路2号珠海国际会议中心裙楼',gap:34}
				]
			}
		},
		methods:{
			closeCurrent() {
				this.$emit('closeAll');
			},
			search(res) {
				uni.showModal({
					content: '搜索：' + res.value,
					showCancel: false
				})
			}
		}
	}
</script>

<style>
	.area_Content{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background: rgba(0,0,0,0.4);
		width: 100%;
		height: 100%;
	}
	.area-title{
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333333;
		font-size: 38upx;
		background: #FFFFFF;
		width: 690upx;
		padding: 30upx 30upx 0;
		border-radius: 40upx 40upx 0 0;
	}
	.area-title .iconguanbi{
		position: absolute;
		left: 30upx;
	}
	.area_search{
		background: #FFFFFF;
		padding-bottom: 20upx;
	}
	.area_list{
		background: #F7F7F7;
		padding: 30upx;
		width: 690upx;
		height: calc(100% - 270upx);
	}
	.area_item{
		width: calc(100% - 60upx);
		height: 132upx;
		background: #FFFFFF;
		border-radius: 20upx;
		margin-bottom: 20upx;
		padding: 0 30upx;
	}
	.area_title,
	.area_info{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.area_name{
		color: #666666;
		font-size: 34upx;
	}
	.area_gap,
	.area_address{
		color: #999999;
		font-size: 26upx;
	}
	.iconduigou{
		color: #00D5A2;
	}
</style>
